import { defineComponent, App, watch, ref, PropType } from 'vue'
import svgError from '@/icons/svg/error.svg'
import MAP from './modules'
const svgIcon = defineComponent({
  name: 'Svgicon',
  props: {
    width: {
      type: String,
      default: '1em'
    },
    height: {
      type: String,
      default: '1em'
    },
    name: {
      type: String,
      default: 'radio'
    },
    original: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    dir: {
      type: String as PropType<string>,
      default: 'default' // right,down,left
    }
  },
  setup(props) {
    const svgData = ref(svgError)
    const svgDataFn = MAP[props.name]
    watch(
      () => props.name,
      (value) => {
        svgData.value = MAP[value]()
      }
    )
    if (svgDataFn) svgData.value = svgDataFn()
    return () => <icon
      original={props.original}
      width={props.width}
      height={props.height}
      dir={props.dir}
      data={svgData.value}>
    </icon>
  }
})
const svgCompoents = {
  install: (app: App): void => {
    app.component(svgIcon.name, svgIcon)
  }
}
export default svgCompoents
